import styles from './index.module.less'
import { useSetState } from 'ahooks'
import UpdatePwd from './components/pwd'
import { useEffect, useState } from 'react'
import { useUserInfo } from '@/utils/hooks'
import { updateContract } from '@/api/user'
import Toast from '@/components/toast'
import cm from 'classnames'

const formItemArr = [
  {
    label: 'Telegram:',
    key: 'telegram',
  },
  {
    label: 'Whatsapp:',
    key: 'whatsapp',
  },
  {
    label: '微信:',
    key: 'wechat',
  },
]

const Index = () => {
  const { user, setUser } = useUserInfo()
  const [formData, setFormData] = useSetState({
    telegram: { value: '' },
    whatsapp: { value: '' },
    wechat: { value: '' },
  })

  useEffect(() => {
    if (!user.email) {
      return
    }
    setFormData({
      telegram: {
        isEdit: false,
        value: user.telegram,
      },
      whatsapp: {
        isEdit: false,
        value: user.whatsapp,
      },
      wechat: {
        isEdit: false,
        value: user.wechat,
      },
    })
  }, [user])
  const [showPwd, togglePwd] = useState(false) //密码修改

  // 输入更新数据
  const updateData = async (key, data) => {
    setFormData({
      [key]: {
        ...formData[key],
        ...data,
      },
    })
  }

  // 打开编辑
  const openEdit = (key) => {
    setFormData({
      telegram: {
        ...formData.telegram,
        isEdit: false,
      },
      wechat: {
        ...formData.wechat,
        isEdit: false,
      },
      whatsapp: {
        ...formData.whatsapp,
        isEdit: false,
      },
      [key]: {
        ...formData[key],
        isEdit: true,
      },
    })
    setTimeout(() => {
      document.querySelector('#' + key).focus()
    }, 0)
  }

  //失焦开始编辑
  const blurEdit = async () => {
    setFormData({
      telegram: {
        ...formData.telegram,
        isEdit: false,
      },
      wechat: {
        ...formData.wechat,
        isEdit: false,
      },
      whatsapp: {
        ...formData.whatsapp,
        isEdit: false,
      },
    })
    const params = {
      telegram: formData.telegram.value,
      whatsapp: formData.whatsapp.value,
      wechat: formData.wechat.value,
    }
    const res = await updateContract(params)
    if (!res.code) {
      Toast.normal('编辑成功')
      setUser({
        ...user,
        ...params,
      })
    }
  }

  return (
    <div className={styles.accountMain}>
      <p className={styles.title}>账号信息</p>
      <div className={styles.accountItem}>
        <div className={styles.formLabel}>
          <span>账号:</span>
          <span>{user.email}</span>
        </div>
        <span className={styles.btn} onClick={() => togglePwd(true)}>
          修改密码
        </span>
      </div>
      <p className={styles.title}>联系方式</p>
      {user.email &&
        formItemArr.map((item) => {
          return (
            <div key={item.key} className={styles.formItem}>
              <div className={styles.formLabel}>
                <span>{item.label}</span>
                <input
                  maxLength={100}
                  className={formData[item.key].isEdit ? '' : 'hidden'}
                  id={item.key}
                  onBlur={blurEdit}
                  value={formData[item.key].value}
                  onInput={(e) => updateData(item.key, { value: e.currentTarget.value })}
                  placeholder="请在此输入您的微信"
                />
                <span className={cm('textEllipsis', formData[item.key].isEdit ? 'hidden' : '')}>
                  {formData[item.key].value || '未添加'}
                </span>
              </div>
              {formData[item.key].isEdit ? (
                <span className={styles.btnSure}>确认</span>
              ) : (
                <span className={styles.btn} onClick={() => openEdit(item.key)}>
                  编辑
                </span>
              )}
            </div>
          )
        })}
      {showPwd && <UpdatePwd visible={showPwd} close={() => togglePwd(false)} />}
    </div>
  )
}

export default Index
